<ol class="breadcrumb newcrumb">
    <li>
        <a href="#">
            <span><i class="fa fontello-home-outline"></i>
            </span>Home</a>
    </li>
    <li><a href="#">UI Element</a>
    </li>
    <li>Maps</li>
</ol>

<div class="row">
    <div class="col-md-12">
        <!-- AREA CHART -->
        <div class="box">
            <div class="box-header">
                <h3 class="box-title">Vector Map</h3>
            </div>
            <div class="box-body">
                <div id="test1" class="gmap" style="width:100%;height:250px;position:relative;"></div>
            </div>
            <!-- /.box-body -->
        </div>
        <!-- /.box -->
    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <!-- AREA CHART -->
        <div class="box">
            <div class="box-header">
                <h3 class="box-title">Maps</h3>
            </div>
            <div class="box-body">
                <div id="mapContainer" style="width:100%;height:250px;position:relative;"></div>
            </div>
            <!-- /.box-body -->
        </div>
        <!-- /.box -->
    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <!-- AREA CHART -->
        <div class="box">
            <div class="box-header">
                <h3 class="box-title">Vector Map</h3>
            </div>
            <div class="box-body">
                <div id="world-map" style="height: 300px; width:100%"></div>
            </div>
            <!-- /.box-body -->
        </div>
        <!-- /.box -->
    </div>
</div>

<script>
$('#mapContainer').jHERE({
    center: [52.500556, 13.398889],
    type: 'smart',
    zoom: 8
});

//gmaps3
//
//
$("#test1").gmap3({
    marker: {
        latLng: [52.500556, 13.398889],
        options: {
            draggable: true
        },
        events: {
            dragend: function(marker) {
                $(this).gmap3({
                    getaddress: {
                        latLng: marker.getPosition(),
                        callback: function(results) {
                            var map = $(this).gmap3("get"),
                                infowindow = $(this).gmap3({
                                    get: "infowindow"
                                }),
                                content = results && results[1] ? results && results[1].formatted_address : "no address";
                            if (infowindow) {
                                infowindow.open(map, marker);
                                infowindow.setContent(content);
                            } else {
                                $(this).gmap3({
                                    infowindow: {
                                        anchor: marker,
                                        options: {
                                            content: content
                                        }
                                    }
                                });
                            }
                        }
                    }
                });
            }
        }
    },
    map: {
        options: {
            zoom: 13
        }
    }
});
//jvector map
//World map by jvectormap
//jvectormap data
var visitorsData = {
    "US": 398, //USA
    "SA": 400, //Saudi Arabia
    "CA": 1000, //Canada
    "DE": 500, //Germany
    "FR": 760, //France
    "CN": 300, //China
    "AU": 700, //Australia
    "BR": 600, //Brazil
    "IN": 800, //India
    "GB": 320, //Great Britain
    "RU": 3000 //Russia
};
//World map by jvectormap
$('#world-map').vectorMap({
    map: 'world_mill_en',
    zoomMax: '8',
    backgroundColor: "transparent",
    regionStyle: {
        initial: {
            fill: '#ddd',
            "fill-opacity": 1,
            stroke: 'none',
            "stroke-width": 2,
            "stroke-opacity": 1
        }
    },
    series: {
        regions: [{
            values: visitorsData,
            scale: ["#3E5E6B", "#A6BAC2"], //['#3E5E6B', '#A6BAC2'],
            normalizeFunction: 'polynomial'
        }]
    },
    onRegionLabelShow: function(e, el, code) {
        if (typeof visitorsData[code] != "undefined")
            el.html(el.html() + ': ' + visitorsData[code] + ' new visitors');
    }
});
</script>


